<template>
  <div>
   
   <nav class="m-nav" >
      <van-dropdown-menu>
        <van-dropdown-item title="全城" ref="item">
          <van-tabs
            v-model="active"
            line-width="50%"
            line-height="2px"
            duration="0"
          >
            <van-tab title="商圈">
              <van-tree-select
                :items="districtItems"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-item="districtid"
              />
            </van-tab>
            <van-tab title="地铁站">
               <van-tree-select
                :items="subItems"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
              />
            </van-tab>
          </van-tabs>
        </van-dropdown-item>
        <van-dropdown-item  v-model="brandValue" :options="brandItems"  @change="brandid(brandValue)"
         />
        <van-dropdown-item
        
        v-model="hallTypevalue"
          :options="hallTypeItems"
          @change="halltyid(hallTypevalue)"
        />
      </van-dropdown-menu>
      </nav>

      <div class="list-wrap">
      <div class="cinemalist" >
      <div class="link" v-for="(item, index) in CinemaList" :key="index"  @click="tickets(item)">
        <div class="title">
          <span class="w">{{ item.title }}</span>
          <span class="price">{{ item.price.n }}</span>
          <span class="q">{{ item.price.q }}</span>
        </div>
        <div class="flex">{{ item.location }}</div>
        <div class="label">
          <div :class="i.code" v-for="(i, n) in item.services" :key="n">
            {{ i.text }}
          </div>
        </div>
        <div class="div" v-for="(n, i) in item.discount" :key="i">
          <img :src="n.card" alt="" />
          <div class="text">{{ n.text }}</div>
        </div>
      </div>
    </div>
        
      </div>
  </div>
</template>

<script>

export default {



data:function(){
  return{
    loading:true,
     DetailsCinema: [],
   isLoding:true,
   CinemaList:[],
    cityArr:[],
     brandValue: -1,
      value2: "a",
     time:"",
      filterCinemas: null,
      active: 0,
      activeId: -1,
      activeIndex: 0,
        districtId: -1, // 点击默认行政区
      brandId: -1, // 点击影院品牌id
      hallType: [], // 影厅类型数据
      hallTypeid: -1, // 点击影厅类型id
       hallTypevalue: -1, 
       district: [],
       subway:[],
       brand:[], 
  };
},
methods:{
  tickets: function (n) {
      this.$router.push({
        path: "/ticketoffice",
        query: {
          cinemaId: n.cinemaId,
          addr: n.title,
          movieId: this.$route.query.id,
          date: this.time,
        },
      });
    },
   // 获取当天时间
    NowTime: function () {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
  onConfirm() {
      this.$refs.item.toggle();
    },
  getHistory() {
      //获取历史记录
      let re = localStorage.getItem("selecthistory");
      this.cityArr = JSON.parse(re)[0];
    },
      
    // 点击选定行政区赋值id
    districtid: function (data) {
      this.districtId = data.id;
      console.log(this.districtId, data);
    },
    // 点击选定影院品牌赋值id
    brandid: function (value) {
      this.brandId = value;
      console.log(this.brandId);
    },
    // 点击选定影厅类型赋值id
    halltyid: function (n) {
      this.hallTypeid = n;
      console.log(this.hallTypeid);
    },
},
 

created:function(){
   this.getHistory();
   this.time = this.NowTime();
 this.axios
      .get("https://apis.netstart.cn/maoyan/index/filterCinemas?ci="+this.cityArr.id+"")
      .then((res) => {
        this.filterCinemas = res.data;
        this.district = res.data.district.subItems;
        this.brand = res.data.brand.subItems;
        this.subway = res.data.subway.subItems;
        this.hallType = res.data.hallType.subItems;
        console.log(this.filterCinemas,2222);
      });

        this.isLoding = true;

 this.axios
      .get("https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
          this.time +
          "&offset=0&limit=20&districtId=" +
          this.districtId +
          "&lineId=-1&hallType=" +
          this.hallTypeid +
          "&brandId=" +
          this.brandId +
          "&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
          this.cityArr.id +
          "&lat=23.135636443326355&lng=113.42422402238324")
      .then((res) => {
        console.log(res.data, this,1111);
        this.CinemaList = res.data;
         this.isLoding = false;
       
      });

      



},

 watch: {
    // 监听点击影院品牌
    brandId: function () {
      // 影院链接
      this.isLoding = true;
      this.axios
        .get(
          "https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
            this.time +
            "&offset=0&limit=20&districtId=" +
            this.districtId +
            "&lineId=-1&hallType=" +
            this.hallTypeid +
            "&brandId=" +
            this.brandId +
            "&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
            this.cityArr.id +
            "&lat=23.135636443326355&lng=113.42422402238324"
        )
        .then((res) => {
          this.CinemaList = res.data;
          // console.log(res, this.districtId);
          this.isLoding = false;
        });
    },
    // 监听点击影厅类型
    hallTypeid: function () {
      this.isLoding = true;
      this.axios
        .get(
          "https://apis.netstart.cn/maoyan/index/moreCinemas?day=" +
            this.time +
            "&offset=0&limit=20&districtId=" +
            this.districtId +
            "&lineId=-1&hallType=" +
            this.hallTypeid +
            "&brandId=" +
            this.brandId +
            "&serviceId=-1&areaId=-1&stationId=-1&item&updateShowDay=true&reqId=1636710166221&cityId=" +
            this.cityArr.id +
            "&lat=23.135636443326355&lng=113.42422402238324"
        )
        .then((res) => {
          this.CinemaList = res.data;
          // console.log(res, this.districtId);
          this.isLoding = false;
        });
    }
  },
   computed: {
    brandItems: function () {
      return this.brand.map((o) => ({
        ...o,
        value: o.id,
        text: o.name ,
      }));
    },
    districtItems: function () {
      return this.district.map((p) => {
        return {
          ...p,
          text: p.name + `(${p.count})`,
          children: p.subItems.map((c) => ({ ...c, text: c.name + `(${c.count})`})),
        };
      });
    },

  // 影厅类型
    hallTypeItems: function () {
      return this.hallType.map((a) => ({
        ...a,
        value: a.id,
        text: a.name,
      }));
    },
   subItems: function () {
      return this.subway.map((s) => {
        return {
          ...s,
          text: s.name + `(${s.count})`,
          children: s.subItems.map((w) => ({ ...w, text: w.name + `(${w.count})` })),
        };
      });
    },


  },
}
</script>

<style lang="less">
.m-nav{
    text-align: center;
   border-bottom: 0.02rem solid #e6e6e6;
  height: 2.8rem;
  margin-top: 150px;
  .one1{
    padding:21px;
    // margin-left: -30px;
     .city-name1 {
       font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1.4rem;
    max-width: 19.2vw;
}
    .city-entry-arrow1 {
   width: 0;
    height: 0;
    border: 0.3rem solid transparent;
    border-top-color: #b0b0b0;
    display: inline-block;
    margin-left: 0.2rem;
    margin-right: 1rem;
    margin-top: 1.2rem;
}
  }
}
 .cinemalist {
    .link {
      margin-left: 15px;
      padding: 13px 15px 13px 0;
      border-bottom: 1px solid #dfdfdf;
      .title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .w {
          font-size: 16px;
          color: #000000;
        }
        .q {
          margin-left: 3px;
          color: #f03d37;
          font-size: 12px;
        }
        .price {
          font-size: 18px;
          color: #f03d37;
          margin-left: 3px;
        }
      }
      .flex {
        font-size: 13px;
        margin-top: 5px;
        color: #666666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .label {
        margin-top: 3px;
        display: flex;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        div {
          padding: 0 3px;
          margin-left: 3px;
          border-radius: 4px;
          font-size: 12px;

          &:nth-child(1) {
            margin: 0;
          }
          &.snack {
            color: #ff9900;
            border: 1px solid #f90;
          }
          &.endorse {
            color: #589daf;
            border: 1px solid #589;
          }
          &.allowRefund {
            color: #589daf;
            border: 1px solid #589;
          }
          &.vipTag {
            color: #ff9900;
            border: 1px solid #f90;
          }
          &.hallType {
            color: #589daf;
            border: 1px solid #589;
          }
        }
      }
      .div {
        margin-top: 5px;
        display: flex;
        align-items: center;

        img {
          width: 15px;
          height: 14px;
          margin-right: 3px;
        }
        .text {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
</style>